<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    // function loadScript(src, callback) {
    //   let script = document.createElement("script");
    //   script.src = src;
    //   script.onload = function () {
    //     callback(src)
    //   }
    //   script.onerror = function (err) {
    //     callback(err)
    //   }
    //   document.head.appendChild(script)
    // }
    // // 调用加载多个js 产生回调地狱
    // loadScript("./1.js", function (src) {
    //   console.log(1, src)
    //   loadScript("./2.js", function (src) {
    //     console.log(2, src)
    //     loadScript("./3.js", function (src) {
    //       console.log(3, src)
    //     })
    //   })
    // }) 
    function loadScript(src) {
      return new Promise((resolve, reject) => {
        let script = document.createElement("script");
        script.src = src;
        script.onload = function () {
          resolve(src)
        }
        script.onerror = function (err) {
          reject(err)
        }
        document.head.appendChild(script);
      })
    }
    // promise 解决回调地狱
    loadScript("./1.js").then(res => {
      console.log(1, res)
      return loadScript("./2.js")
    }).then(res => {
      console.log(2, res)
      return loadScript("./3.js")
    }).then(res => {
      console.log(3, res)
    }).catch(err => {
      console.log(err)
    })
    //
  </script>
</body>

</html>